<template>
	<view class="uni-padding-wrap">
		<navBar></navBar>
		<view class="content">
			<view class="selection">
				<view class="head">
					<view class="head_left">
						{{curGameCateInfo.name.toUpperCase()}}
					</view>
					<view class="head_right">
						<view :class="['search',{'focusBorder': isFocus}]">
							<uni-icons type="search" size="22" color="#fff"></uni-icons>
							<input class="uni-input input" :placeholder="$t('Page.home.ssyx')"
								v-model.trim="searchParams.gamename" @input="handleInput" @focus="isFocus = true"
								@blur="isFocus = false" />
						</view>
						<view class="provide">
							<view class="sharearea">
								<waves>
									<view class="drawer line" @click="getLanguages">
										<text class="line_last">{{$t('Page.home.gys')}}</text>
										<text class="triangle"></text>
									</view>
								</waves>
							</view>
							<view class="lange_box" v-show="showType">
								<checkbox-group class="lang_item" @change="checkboxChange">
									<label class="label" v-for="item in gameTypeList" :key="item.gameName">
										<view class="slot">
											<checkbox style="transform:scale(0.7)" :value=" item.gameName"
												:checked="item.checked" color="#fff">
											</checkbox>
											<view>{{item.gameName}}</view>
										</view>
										<text>{{item.gameNumber}}</text>
									</label>
								</checkbox-group>
							</view>
						</view>
					</view>
				</view>
				<view class="slot_list">
					<view class="slot_item" v-for="(item,index) in gameList" :key="'game'+index">

						<adaptCar :src="item.gamepic" :isMaintain="item.catestatus === 'mainte'"
							@onTap="clickGameurl(item,index)"></adaptCar>
						<view>{{ item.game_name }}</view>
					</view>
				</view>
			</view>
			<view class="progress-box">
				<text>{{gameList.length}}/{{totalCount}}</text>
				<view class="progress">
					<progress :percent="curProgress" show-info stroke-width="3" activeColor="#33c38f"
						backgroundColor="#000" />
				</view>
			</view>
			<view class="load" v-if="gameList.length < totalCount">
				<waves>
					<button @click="loadMore">{{$t('Page.home.jzgd')}}</button>
				</waves>
			</view>
		</view>
		<match-media :max-width="MAX_SIZEiZE">
			<tabBar :showselected="true"></tabBar>
		</match-media>

	</view>
</template>
<script>
	import {
		Debounce
	} from '@/utils/common.js'
	import {
		MAX_SIZEiZE
	} from '@/common/app.js'
	import {
		sendMessage
	} from '@/api/websocket.js'
	import {
		goGamePang
	} from '@/utils/routerJump.js'
	export default {
		data() {
			return {
				MAX_SIZEiZE,
				gameTypeList: [{
					gameName: '',
					gameNumber: 0
				}],
				searchParams: {
					cate_id: '',
					order: '2',
					page: 1,
					page_ini: 21,
					gamename: ''
				},
				gameList: [],
				totalCount: 0,
				curGameCateInfo: null,
				seachText: '',
				showType: false,
				isFocus: false
			}
		},
		computed: {
			curProgress() {
				if (this.gameList && this.totalCount) {
					return ((this.gameList.length * 100) / this.totalCount).toFixed(2)
				} else {
					return 0
				}
			}
		},
		onLoad(option) {
			const item = JSON.parse(decodeURIComponent(option.item));
			this.curGameCateInfo = item
			this.$set(this.gameTypeList[0], 'gameName', item.name)
			this.searchParams.cate_id = item.id
			this.getSubGame()
			console.log("item: ", item);
		},
		methods: {
			clickGameurl(item, index) {
				console.log('clickGameurl', JSON.parse(JSON.stringify(item)))
				goGamePang({
					id: item.id,
					name: item.game_name,
					namecode: item.namecode,
					gamepic: item.gamepic
				})
			},
			loadMore() {
				if (this.gameList.length < this.totalCount) {
					this.searchParams.page++
					this.getSubGame()
				}
			},
			getSubGame() {
				// 我的收藏
				if (this.searchParams.cate_id === 0) {
					const {
						MYCOLECT
					} = this.$api
					sendMessage({
						flag: MYCOLECT,
						content: this.searchParams
					})
					uni.$once(MYCOLECT, (res) => {
						const {
							code,
							data
						} = res
						console.log("res: ", res);
						if (code === 1) {
							if (this.searchParams.page === 1) {
								this.gameList = data.list
								this.totalCount = data.count
								this.$set(this.gameTypeList[0], 'gameNumber', data.count)
							} else {
								this.gameList = [...this.gameList, ...data.list]
							}
							console.log('this.totalCount', this.gameList, this.totalCount)
						}
					})

				} else { //正常游戏二级分类
					const {
						GAMEINDEX
					} = this.$api
					sendMessage({
						flag: GAMEINDEX,
						content: this.searchParams
					})
					uni.$once(this.$api.GAMEINDEX, (res) => {
						const {
							code,
							data
						} = res
						if (code === 1) {
							if (this.searchParams.page === 1) {
								this.gameList = data.list
								this.totalCount = data.count
								this.$set(this.gameTypeList[0], 'gameNumber', data.count)
							} else {
								this.gameList = [...this.gameList, ...data.list]
							}
							console.log('this.totalCount', this.gameList, this.totalCount)
						}
					})

				}
			},
			getLanguages() {
				this.showType = !this.showType
			},
			checkboxChange(e) {
				const checkedArr = e.target.value
				this.gameTypeList.forEach((item, index) => {
					if (checkedArr.includes(item.gameName)) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
				})
			},
			handleInput: Debounce(function(e) {
				this.getSubGame()
			}, 500),
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		max-width: 1200px;
		margin: auto;
	}

	.head {
		display: flex;
		justify-content: space-between;
		color: #fff;
		margin: 15px 0 22px;
	}

	.head_left {
		display: flex;
		align-items: center;
		font-size: 20px;
		font-weight: 700;
	}

	.head_right {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.search {
		display: flex;
		align-items: center;
		border-radius: 12px;
		height: 32px;
		background-color: #242a32;
		padding: 0 12px;
		color: #fff;
		border: 2px solid #343a41;
	}

	.search:hover {
		border-color: #000;
	}

	.focusBorder {
		transition: all .3s;
		border-color: transparent !important;
	}

	.input {
		background-color: transparent;
		padding-left: 5px;
	}

	.search input .uni-input-placeholder {
		color: #fff;
	}

	.provide {
		height: 36px;
		position: relative;
	}

	.sharearea {
		width: 140px;
		height: 36px;
		margin-left: 20px;
		display: flex;
		/* #ifdef H5 */
		flex-flow: column;
		/* #endif */
		overflow: hidden;
		border-radius: 16px;
	}

	.drawer {
		box-shadow: 0px;
		border-radius: 12px;
		min-height: 36px;
		line-height: 36px;
		background: #20262d;
	}

	.line {
		color: #adadc2;
		display: flex;
		height: 36px;
		align-items: center;
		background-color: #2b333b;
		line-height: 20px;
		padding: 0px 18px;
		justify-content: space-between;
		flex-direction: row;
	}

	/* #ifdef H5 */
	.line:hover {
		background-color: #323b43;
		cursor: pointer;
	}

	/* #endif */

	.line_last {
		color: #fff;
	}

	.rotate {
		/* transform: rotateZ(180deg);
	margin-top: 0px; */
	}

	.triangle {
		display: inline-block;
		width: 0;
		height: 0;
		border: 5px solid transparent;
		border-left-color: #fff;
		transition: .5s all;
	}

	.lange_box {
		width: 100%;
		transition: all 1s;
		top: 46px;
		right: 0;
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12);
		overflow: hidden;
		background: #2b333b;
		color: #fff;
		border-radius: 10px;
		position: absolute;
		z-index: 9;

		.lang_item {
			display: flex;
			flex-direction: column;
			cursor: pointer;
			color: #7c7c95;
			font-size: 13px;
		}

		.label {
			padding: 0 10px;
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.label:hover {
			background-color: #2D353D;
			color: #fff;
		}

		/deep/ uni-checkbox .uni-checkbox-input {
			border-color: #000;
			background: transparent;
		}

		/deep/ uni-checkbox .uni-checkbox-input:hover {
			border-color: #000;
		}

		/deep/ .uni-checkbox-input-checked {
			background: #33c38f !important;
			border-color: #33c38f !important;
		}
	}



	.load {
		margin-top: 24px;
		color: #fff;
		height: 44px;
		line-height: 44px;
		display: flex;
		justify-content: center;

	}

	/deep/ uni-button {
		line-height: 44px;
		color: #fff;
		background: #2b333b;
		font-size: 14px;
	}

	/deep/ uni-button:hover {
		background: #484F56;
	}

	.more {
		height: 32px;
		margin-top: 24px;
		display: flex;
		justify-content: space-between;
		color: #fff;
	}

	.slot {
		display: flex;
		align-items: center;
	}

	.slot_list {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
		gap: 16px;

		.slot_item {
			width: 100%;
			border-radius: 16px;
			color: #fff;

			.solt_shadow {
				position: relative;
				border-radius: inherit;
				overflow: hidden;

				.ac_coupon-wrap {
					height: 0;
					padding-top: 100%;
					position: relative;

					.ac_coupon-content {
						position: absolute;
						top: 0;
						width: 100%;
						height: 100%;
						background-size: cover;
					}
				}
			}
		}
	}

	.shadow {
		opacity: 0;
		display: none;

		.shadow-image {
			width: 42px;
			height: 42px;
		}
	}

	@keyframes scaleImage {
		from {
			transform: scale(1.3);
			background: rgba(0, 0, 0, 0);
		}

		to {
			transform: scale(1);
			background: rgba(0, 0, 0, 0.4);
		}
	}

	@keyframes scaleBox {
		from {
			transform: scale(1);
		}

		to {
			transform: scale(1.1);
		}
	}



	/* #ifdef H5 */
	.solt_shadow:hover .ac_coupon-wrap {
		animation: scaleBox 0.25s ease 0s 1 normal forwards running;
	}

	.solt_shadow:hover .shadow {
		opacity: 1;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1;
		border-radius: inherit;
		animation: scaleImage 0.25s ease 0s 1 normal forwards running;
	}

	/* #endif */

	.progress-box {
		display: flex;
		justify-content: center;
		margin-top: 24px;

		color: #fff;

	}

	.progress {
		width: 100px;
		margin-left: 10px;
	}

	/deep/ .uni-progress-info {
		font-size: 13px !important;
	}

	@media screen and (max-width: 768px) {
		.content {
			padding-bottom: 50px;
		}

		.slot_list {
			display: grid;
			grid-template-columns: repeat(3, calc(33.3% - 10rpx));
			/* flex-wrap: wrap; */
			gap: 16rpx;
		}



		.height {
			height: 60px !important;
		}

		.head {
			display: inherit;
		}

		.head_left {
			color: #33c38f;
		}

		.head_right {
			margin-top: 10px;
		}
	}

	.height {
		height: 80px;
	}
</style>